<template>
    <div class="start-menu-col overflow-hidden rounded-lg transform -translate-x-64 -translate-y-2 z-50 absolute top-32 left-1/2 rounded-lg">
        <div class="start-menu" :class="{'slide-in': showRight, 'slide-out': showLeft}">
            <div class="w-full h-full">
            

                    <div class="start-menu-col float-left relative w-full h-full rounded-lg">
                        <div class="h-14 w-full mt-4 leading-10 px-11 py-2">
                            <span class="absolute">Pinned</span>
                            <div class="float-right h-5 w-20 my-2 text-center rounded transform scale-90 leading-5 bg-white shadow-lg cursor-pointer">
                                <span class="font-normal" @click="changeMenuShow">All apps <span class="font-black">＞</span></span>
                            </div>
                        </div>  

                        <div class="h-48 w-full grid grid-cols-6 grid-rows-3 place-items-center px-4">
                            <button class="btn rounded-sm h-14 hover:bg-white hover:bg-opacity-80 dark:hover:bg-black dark:hover:bg-opacity-20 duration-200 cursor-auto hover:translate-x-5" 
                                v-for="(item, index) in apps" :key="index" @click="item.click(); openApp(item.name)">
                                <img class="w-9 h-8 mx-auto transform active:scale-75 duration-150 px-1.5 py-1" :src="item.icon">
                                <span>{{ item.label }}</span>
                            </button>
                        </div>
                        
                        <div class="h-14 w-full mt-4 leading-10 px-11 py-2">
                            <span class="absolute">Recommended</span>
                        </div>
                        <div class="h-36 w-full grid grid-cols-2 grid-rows-3 place-items-left px-10">
                            <button class="w-full rounded-sm h-10 text-left hover:bg-white hover:bg-opacity-80 dark:hover:bg-black dark:hover:bg-opacity-20 duration-200 cursor-auto hover:translate-x-5" 
                                v-for="(item, index) in recommendedApps" :key="index" @click="item.action(); openApp(item.name)">
                                <img class="inline-block w-9 h-8 mx-auto transform active:scale-75 duration-150 px-1.5 py-1" :src="item.icon">
                                <span>{{ item.label }}</span>
                            </button>
                        </div>
                    </div>
                
                    <div class="start-menu-col float-left relative h-full w-full rounded-lg">
                        <div class="h-14 w-full mt-4 leading-10 px-11 py-2">
                            <span class="absolute">All apps</span>
                            <div class="float-right h-5 w-14 my-2 text-center rounded transform scale-90 leading-5 bg-white shadow-lg cursor-pointer">
                                <span class="font-normal" @click="changeMenuShow"><span class="font-black">＜</span>    Back</span>
                            </div>
                        </div>  
                    </div> 

            </div>
        </div> 
        <div class="h-12 w-full bottom-0 absolute bg-gray-300 rounded-b-lg px-12 py-4">
            <div class="flex justify-between">
                <div class="flex-grow"></div>
                <img class="rounded-full" src="/src/assets/ui/power.png" width="14">
            </div>
            
        </div>      
    </div>
    
</template>

<script setup>
import { reactive, toRefs } from 'vue'
import { store } from '../store'
    const none = () => {}

    const openApp = (name) => {
        store.commit(`CHANGE_${name.toUpperCase()}_ACTIVE`, true)
        store.commit('CHANGE_START')
    }

    const apps = [
                { label: 'Browser', name: 'browser', icon: '/src/assets/icons/edge.png', active: false, click: none },
                { label: 'Word', icon: '/src/assets/icons/word.png', active: false, click: none },
                { label: 'WriteBoard', name: 'writeboard', icon: '/src/assets/icons/writeboard.png', active: false, click: none },
                { label: 'OneNote', icon: '/src/assets/icons/onenote.png', active: false, click: none },
                { label: 'Mail', icon: '/src/assets/icons/mail.png', active: false, click: none },
                { label: 'To Do', icon: '/src/assets/icons/todo.png', active: false, click: none },
                { label: 'Store', icon: '/src/assets/icons/store-dark.png', active: false, click: none },
                { label: 'Photos', icon: '/src/assets/icons/photos.png', active: false, click: none },
                { label: 'Your Phone', icon: '/src/assets/icons/your-phone.png', active: false, click: none },
                { label: 'Notepad', name:'notepad', icon: '/src/assets/icons/notepad.png', active: false, click: none },
                { label: 'Calculator', icon: '/src/assets/icons/calculator.png', active: false, click: none },
                { label: 'Spotify', icon: '/src/assets/icons/spotify.png', active: false, click: none },
                { label: 'VS Code', name:'vscode', icon: '/src/assets/icons/vscode.png', active: false, click: none },
                { label: 'Terminal', icon: '/src/assets/icons/terminal.png', active: false, click: none },
                { label: 'Github', icon: '/src/assets/icons/github.png', active: false, click: none },
                { label: 'Identify', name: 'identify',icon: '/src/assets/icons/identify.png', active: false, click: none },
                { label: 'CloudMusic', name:'cloudmusic', icon: '/src/assets/icons/cloudmusic.png', active: false, click: none },
            ],

            recommendedApps = [
                { label: 'Edge', subLabel: '17min ago', icon: '/src/assets/icons/edge.png', active: false, click: none },
                { label: 'Word', subLabel: '1h ago', icon: '/src/assets/icons/word.png', active: false, click: none },
                { label: 'Mail', subLabel: '12h ago', icon: '/src/assets/icons/mail.png', active: false, click: none },
                { label: 'Terminal', subLabel: '1h ago', icon: '/src/assets/icons/terminal.png', active: false, click: none },
                { label: 'VS Code', subLabel: 'Yesterday at 4:24 PM', icon: '/src/assets/icons/vscode.png', active: false, click: none },
                { label: 'Photos', subLabel: 'Last week', icon: '/src/assets/icons/photos.png', active: false, click: none },
            ]

    const state = reactive({
        showRight: false,
        showLeft: false
    })
    const { showRight, showLeft } = toRefs(state)

    const changeMenuShow = () => {
        if(showRight.value) {
            showRight.value = false
            showLeft.value = true 
        } else {
            showRight.value = true
            showLeft.value = false
        }
    }
        

</script>

<style scoped lang="scss">
.start-menu {
    height: 33rem;
    width: 64rem;
    
    font-size: 0.625rem;
    font-weight: 550;

    .btn {
        width: 5.5rem;
    }
}

.start-menu-col {
    width: 32rem;
    background-color: #e8edf1;

    

    .slide-in {
        animation: .3s slidein;
        transform: translateX(-32rem);
    }

    @keyframes slidein {
        from { transform: translateX(0); }
        to { transform: translateX(-32rem); }
    }

    .slide-out {
        animation: .3s slideout;
        transform: translateX(0);
    }

    @keyframes slideout {
        from { transform: translateX(-32rem); }
        to { transform: translateX(0); }
    }

}


</style>